<template>
  <div id="userAddressList">
    <div>
      <i-button type="primary" style="margin-bottom:5px;" @click="showAddView">新增地址</i-button>
      <tablePage ref="containerTab" :api="getUserAddressInfo">
        <!--sortName="createTime " sort-type="desc"-->
        <template slot-scope="props">
          <Table :columns="columns7" border :data="props.data"></Table>
        </template>
      </tablePage>
      <Modal
        :visible.sync="addressEditShow"
        v-model="addressEditShow"
        title="地址信息编辑"
        class-name="vertical-center-modal">
        <Form ref="tableUserAddress" :model="tableUserAddress" :rules="ruleFomatValue" :label-width="70" >
          <FormItem label="企业名称">
            <i-input type="text" v-model="tableUserAddress.companyName" placeholder="企业名称">
            </i-input>
          </FormItem>
          <FormItem label="联系电话">
            <i-input type="text" v-model="tableUserAddress.phone" placeholder="联系电话">
            </i-input>
          </FormItem>
          <FormItem label="地址" prop="address">
            <i-input type="text" v-model="tableUserAddress.address" placeholder="地址">
            </i-input>
          </FormItem>
          <FormItem  label="联系人" prop="phone">
            <i-input type=text v-model="tableUserAddress.linkman" placeholder="联系人">
            </i-input>
          </FormItem>
          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="addData( tableUserAddress )">确认修改</Button>
            <Button type="primary" @click="addressEditShow= false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal
        v-model="addUserModalShow"
        title="地址管理添加">
        <Form ref="ruleForm" :model="ruleForm" :rules="ruleFomatValue" :label-width="70" >
          <FormItem label="企业名称">
            <i-input type="text" v-model="ruleForm.companyName" placeholder="企业名称">
            </i-input>
          </FormItem>
          <FormItem label="联系电话" prop="phone">
            <i-input type="text" v-model="ruleForm.phone" placeholder="联系电话">
            </i-input>
          </FormItem>
          <FormItem label="地址" prop="address">
            <i-input type="text" v-model="ruleForm.address" placeholder="地址">
            </i-input>
          </FormItem>
          <FormItem label="联系人">
            <i-input type="text" v-model="ruleForm.linkman" placeholder="联系人">
            </i-input>
          </FormItem>
          <FormItem style="float:right;margin-top:-3%;">
            <Button type="info" @click="addData( ruleForm )">立即增加</Button>
            <Button type="primary" @click="addUserModalShow = false">取消</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {
    getUserAddressInfo,
    addUserAddress,
    delectUserAddress
  } from '@/api/backEnd/userAddress'
  // import {
  //   getOwnFleet
  // } from '@/api/backEnd/fleetControl'
  import tablePage from '@/components/table/tablePage.vue'
  // import _ from 'lodash'

  export default {
    name: 'userAddressList',
    data () {
      let pageDefault = {
        pageIndex: 1,
        pageSize: 10
      }
      let addUserModalShow = false
      let addressEditShow = false
      let tableUserAddress = {
        id: '',
        companyName: '',
        phone: '',
        address: '',
        linkman: '',
        userId: '',
        createTime: '',
        state: '',
        relateUserId: ''
      }
      let ruleForm = {
        companyName: '',
        phone: '',
        address: '',
        linkman: ''
      }
      let ruleFomatValue = {
        address: [
          { required: true, message: '地址不能未空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '联系电话必填', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '号码格式不正确！', trigger: 'blur' }
        ]
      }
      let columns7 = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        {
          title: '企业名称',
          key: 'companyName'
        },
        {
          title: '联系电话',
          key: 'phone'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '联系人',
          key: 'linkman'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: (value, row) => {
                    this.showUserEditModal(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定删除？',
                      onOk: () => {
                        let id = params.row.id
                        console.log(params.row)
                        this.dataDelete(id)
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
      let userAddressList = []
      let datas = {
        userAddressList,
        addressEditShow,
        pageDefault,
        columns7,
        tableUserAddress,
        ruleForm,
        addUserModalShow,
        getUserAddressInfo,
        ruleFomatValue
      }
      return datas
    },
    computed: {},
    methods: {
      updateContainerTab () {
        this.$refs['containerTab'].dataRefresh()
      },
      updateContainerTabByPage () {
        this.$refs['containerTab'].dataRefreshCurrentPage()
      },
      pageChangeIndex (pageIndex, pageSize) {
        console.log(pageIndex + pageSize)
        this.pageDefault.pageIndex = pageIndex
        this.pageDefault.pageSize = pageSize
      },
      showAddView () {
        console.log('show add view')
        this.addUserModalShow = true
      },
      addData (param) {
        addUserAddress(param).then(res => {
          if (res.data.isSuccess === 1) {
            console.log(res.data)
            if (param.id) {
              this.$Notice.open({
                title: '数据修改成功!'
              })
              this.addressEditShow = false
              this.updateContainerTabByPage()
            } else {
              this.$Notice.open({
                title: '数据增加成功!'
              })
              this.addUserModalShow = false
              this.ruleForm = {}
              this.updateContainerTab()
            }
          } else if (res.data.isSuccess === 0) {
            this.$Notice.error({
              title: res.data.res
            })
          }
        })
      },
      dataDelete (param) {
        console.log(param)
        delectUserAddress(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Notice.open({
              title: '数据删除成功!'
            })
            this.updateContainerTab()
          }
        })
      },
      showUserEditModal (param) {
        this.addressEditShow = true
        this.tableUserAddress.id = param.id
        this.tableUserAddress.companyName = param.companyName
        this.tableUserAddress.phone = param.phone
        this.tableUserAddress.address = param.address
        this.tableUserAddress.linkman = param.linkman
        this.tableUserAddress.createTime = param.createTime
        this.tableUserAddress.state = param.state
        this.tableUserAddress.userId = param.userId
        this.tableUserAddress.relateUserId = param.relateUserId
      }
    },
    mounted () {},
    components: {tablePage}
  }
</script>
<style scoped>

</style>
